import React from 'react';
import ReactDOM from 'react-dom';
import * as LoginStyle from './Login.less';
import { CONTROL_STATE } from '../../../../constants/control';
import cx from 'classnames';

import onCapsLockImgUrl from '../../../resources/onCapsLock.png';

export default class Login extends React.Component {
	static propTypes = {
		error: React.PropTypes.string,
		userNamePlaceHolder: React.PropTypes.string,
		passwordPlaceHolder: React.PropTypes.string,
		securityCodePlaceHolder:React.PropTypes.string,
		showSecurityCode: React.PropTypes.bool,
		securityCodeUrl: React.PropTypes.string,
		forgetPasswordUrl: React.PropTypes.string.isRequired,
		isAutoAuthenticate: React.PropTypes.bool,
		onLogin: React.PropTypes.func,
	};

	state = {
		userName: '',
		password: '',
		securityCode: '',
		isAutoAuthenticate: false,
		onCapsLock: false,
		disabled: false
	};

	constructor(props) {
		super(props);
	}

	handleInput = (event, key) => {
		let value = event.target.value;

		if (key == 'userName' && value.length > 11)
			return;
		
		this.setState({
			[key]: value,
			disabled: false
		});
	};
	/*点按界面时关闭大写按键提示*/
	handleHiddenCapsLockImg = () =>{
		this.setState({
			onCapsLock: false
		})
	};
	/*判断是否打开按键提示*/
	handleKeyDown = (ev) => {
		let keyCode = ev.keyCode || ev.which;
		/*是否按住shift*/
		let isShift = ev.shiftKey || (keyCode  ==   16 ) || false ; 
		/*判断是否出现大写字符*/
		let isCapsLock = keyCode >= 65 && keyCode <= 90;
		/*出现大写字符且没有按住shift按键*/
		if (isCapsLock && !isShift) {
			this.setState({
				onCapsLock: true
			});
		} else  {
			this.setState({
				onCapsLock: false
			});
		}
	};
	/*点击登录键*/
	handleLogin = () => {
		if (this.state.disabled)
			return false;

		let { userName, password, securityCode, isAutoAuthenticate } = this.state;
		let { onLogin } = this.props;
		onLogin && onLogin({ userName, password, securityCode, isAutoAuthenticate });

		this.setState({ disabled: true, password: '' });
	};
	/*回车键登录*/
	handleEnterKeyPress = (ev) => {
		let keyCode = ev.keyCode || ev.which;
		if (keyCode == 13){
			this.handleLogin()
		}	
	};
	
	handleRemenber = () =>{
		this.setState({ isAutoAuthenticate: !this.state.isAutoAuthenticate });
	};

	haneleReloadSecurityCode = () => {
		let img = ReactDOM.findDOMNode(this.refs.securityCode);
		img.src = img.src;
	};

	render() {
		let { forgetPasswordUrl, userNamePlaceHolder, passwordPlaceHolder, showSecurityCode, securityCodeUrl, securityCodePlaceHolder, error } = this.props;
		let { onCapsLock, password, disabled, isAutoAuthenticate, userName, securityCode } = this.state;

		let buttonCss = cx(LoginStyle.btn_login, {[LoginStyle.normal]: !disabled});
		return (
			<div className={LoginStyle.loginform} onKeyDown={this.handleEnterKeyPress} onClick={this.handleHiddenCapsLockImg}>
				<div className={LoginStyle.header}>
					登  录
				</div>
				<div className={LoginStyle.content}>
					<div className={LoginStyle.userinfo}><span className={LoginStyle.phone}></span>
						<input onInput={(e)=>{this.handleInput(e, 'userName')}} value={userName} type="text" placeholder={userNamePlaceHolder} />
						<p className={LoginStyle.erromessage}>{error}</p>
					</div>
					<div className={LoginStyle.userinfo}><span className={LoginStyle.password}></span>
						<input onInput={(e)=>this.handleInput(e, 'password')} onKeyPress={this.handleKeyDown} value={password} placeholder={passwordPlaceHolder} type="password" />
							{onCapsLock && <img src={onCapsLockImgUrl} className='onCapsLock'/>}
						</div>
					{showSecurityCode && <div className={LoginStyle.code_content}>
						<div className={LoginStyle.code}><span className={LoginStyle.code_icon}></span>
							<input  onInput={(e)=>{this.handleInput(e, 'securityCode')}} placeholder={securityCodePlaceHolder} value={securityCode} type="text" /></div>
						<img ref="securityCode" src={securityCodeUrl+userName} onClick={this.haneleReloadSecurityCode}/>
						<a href="javascript:void(0)" onClick={this.haneleReloadSecurityCode}>看不清</a>
					</div>
					}
					<div className={LoginStyle.remenber}>
						<span className={isAutoAuthenticate ? LoginStyle.checked : ''} onClick={this.handleRemenber}>5天内自动登录</span>
						{/*<a href={forgetPasswordUrl}>忘记密码</a>*/}
					</div>
				</div>
				<div className={LoginStyle.footer}>
					<a onClick={this.handleLogin} disabled={disabled} className={buttonCss} href="javascript:void(0)">登  录</a>
					<p>没有帐号? 忘记密码? 请致电：400-010-0180</p>
				</div>
			</div>
		);
	}
}
